@charset "utf-8";
@import "reset";
$color:#31c27c;
body {
    font: 12px/1.5 "hiragino sans gb", arial;
    position: relative;
    background-color: #f4f4f4;
}

//播放激活高亮边框
.play-border{
    border: 1px solid $color !important;
}

//播放激活盒子阴影
.pos-shadow{
    width: 99%;
    margin: 0 auto;
    position: relative;
    z-index: 999;
    box-shadow: 0 0 5px $color;
}

//文本溢出处理
.textOverflow {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

//多行文本溢出处理
.textOverflow-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

//浮动
.fl {
    float: left;
}

.fr {
    float: right;
}

.clear {
    display: block;
    clear: both;
}

.clear_fix::after {
    content: "";
    display: block;
    clear: both;
}

//定位显示
.container {
    position: absolute;
    top: 44px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: scroll;
}

//加载中动画的定位
.loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

//音乐跳动符动画
.music-jump {
    position: absolute;
    top: 10px;
    right: 10px;
    height: 20px;
    font-size: 0;
    .box {
        display: inline-block;
        width: 5px;
        height: 100%;
        margin-right: 1px;
        font-size: 0;
        position: relative;
        .pillar {
            width: 100%;
            position: absolute;
            bottom: 0;
            background-color: #31c27c;
            animation: play .5s ease-in-out infinite;
        }
        &:nth-of-type(1) .pillar {
            animation-delay: 0s;
        }
        &:nth-of-type(2) .pillar {
            animation-delay: 0.4s;
        }
        &:nth-of-type(3) .pillar {
            animation-delay: 0.2s;
        }
    }
}

@keyframes play {
    0%,
    100% {
        height: 0%;
    }
    50% {
        height: 100%;
    }
}